<%@ page language="java" contentType="text/html; charset=UTF-8"	 pageEncoding="UTF-8"%>
<%@ include file="../include/laypublic.jsp"%>
<!DOCTYPE html>
<html>
<head>
  <title>运营付款申请-新增</title>
</head>
<style>
	.fieldset{
		margin-top: 5px;
		margin-bottom: 0px
	}
	.layui-legend{
		background-color:#5fb878;
		font-size:15px !important;
		width:140px;
	}
	.layui-form-item {
	    margin-bottom: 5px;
	    clear: both;
	    *zoom: 1;
	}
	.layui-form-label{
		width: 180px;
		padding: 9px 5px;
	}
	.right{
		float:right;
	}
	.width106{
		width:106px;
	}
	.width90{
		width:90px;
	}
	.width60{
		width:60px;
	}
	.width50{
		width: 50px;
	}
	.width_input_mx01{
		width: 180px;
	}
	.width_input_mx02{
		width: 160px;
	}
	.layui-form-item .layui-inline{
		margin-right: 0px;
	}
</style>
<body>
<div class="layui-fluid">
    <div class="layui-card">
	    <div class="layui-tab-item layui-show">
	    	<div style="padding-top:15px;">&nbsp;</div>
			<form class="layui-form" id="addInfo_form">
				<fieldset class="layui-elem-field layui-field-title fieldset"  id="baseInfo">
				  <legend class="layui-btn layui-legend" style="text-align:left;cursor:default;">付款申请信息  ></legend>
				  <div style="margin-top:20px">
				  	<div class="layui-form-item">
				  		<div class="layui-inline">
					      	<label class="layui-form-label">申请公司</label>
					      	<div class="layui-input-inline">
								<input type="hidden" name="hrOrgId" value="${bindOrgId}">
								<input type="text" value="${bindOrgName}" style="border:0px;" readonly="readonly" class="layui-input">
					      	</div>
					    </div>
					    <div class="layui-inline">
					    	<label class="layui-form-label">申请部门</label>
				      		<div class="layui-input-inline">
				      			<input type="hidden" name="hrDeptId" value="${bindDeptId}">
								<input type="text" value="${bindDeptName}" style="border:0px;" readonly="readonly" class="layui-input">
				      		</div>
					    </div>
					    <div class="layui-inline">
					    	<label class="layui-form-label">申请人</label>
				      		<div class="layui-input-inline">
				        		<input type="hidden" name="hrStaffApplyId" value="${SESSION_KEY_USER_DETAIL.hrStaffId }">
				        		<input type="text" name="staffName" value="${staffName }" readonly="readonly" style="border:0px" autocomplete="off" class="layui-input">
				      		</div>
					    </div>
				    </div>
				  	<div class="layui-form-item">
				  		<div class="layui-inline">
					      	<label class="layui-form-label">项目名称</label>
					      	<div class="layui-input-inline">
					        	<%--  <infopub:combox id="proCode" name="proCode" layFilter="proCode" layVerify="required" 
					        	 		valueField="proCode" textField="proName" whereMap="processStatus=9"  entire="true" serviceBeanId="discloseProServiceImpl" ></infopub:combox>
					        	 --%>
					        	<select name="proCode" id="proCode" lay-filter="proCode" lay-verify="required" lay-search>
		              				<option value="">请选择</option>
				              		<c:if test="${not empty disclosePros }">
				              			<c:forEach items="${disclosePros}" var="disclosePro">
				              				<option value="${disclosePro.proCode }">${disclosePro.proName }</option>
					            		</c:forEach>
				              		</c:if>
				              	</select>
					        	<input type="hidden" id="proName" name="proName"><!-- 项目名称 -->
					      	</div>
					    </div>
					    <div class="layui-inline">
					    	<label class="layui-form-label">付款公司</label>
				      		<div class="layui-input-inline">
						        <input type="text"  placeholder="请先选择项目" id="hrOrgBillName" readonly="readonly" class="layui-input" lay-verify="required">
						        <input type="hidden" id="hrOrgBillId" name="hrOrgBillId">
				      		</div>
					    </div>
					    <div class="layui-inline">
					    	<label class="layui-form-label">项目业态</label>
				      		<div class="layui-input-inline">
				      			<input type="text" placeholder="请输入项目业态" name="proFormat" maxlength="100" lay-verify="required" autocomplete="off" class="layui-input">
				      		</div>
					    </div>
				    </div>		
				  	<div class="layui-form-item">
					    <div class="layui-inline">
					    	<label class="layui-form-label">申请付款总额（元）</label>
				      		<div class="layui-input-inline">
						        <input type="text" value="0" name="payTotal" readonly="readonly" class="layui-input payTotal" style="font-weight:bold;color:red;font-size:16px;">
				      		</div>
					    </div>
					    <div class="layui-inline">
					    	<label class="layui-form-label">申请付款日期</label>
				      		<div class="layui-input-inline">
				      			<input type="text" name="applyPayDate" id="applyPayDate" readonly lay-verify="required" placeholder="请输入日期" autocomplete="off" class="layui-input">
				        		<%-- <infopub:combox id="add_sgCityId" name="sgCityId" valueField="id" textField="cityName" serviceBeanId="citySurveyServiceImpl" ></infopub:combox> --%>
				      		</div>
					    </div>
				    </div>					    		    
				  	<div class="layui-form-item">
				  		<div class="layui-inline">
					      	<label class="layui-form-label">申请事由</label>
					      	<div class="layui-input-inline">
					        	<textarea name="payReason" lay-verify="required" maxlength="500" placeholder="输入申请事由" class="layui-textarea" style="width:899px;height:90px;"></textarea>
					      	</div>
			    		</div>
		    		</div>
		  		</div>
			</fieldset>
				<fieldset class="layui-elem-field layui-field-title fieldset" id="loanInfo">
			  		<legend class="layui-btn layui-legend" style="text-align:left;cursor:default;">付款明细  ></legend>
				  	<div style="margin-top:20px">
					    <fieldset class="layui-elem-field layui-field-title fieldset"  id="customerFile">
					  		<legend style="margin-left:40px;font-size:15px;font-weight:bold;">明细子项  ></legend>
						  	<div style="margin-top:20px">
						    	<div id="commRow1">
							  		<div class="layui-form-item">
							    		<div class="layui-inline width106">
									    	<p class="right">子项<label>1</label>：</p>
									    	<input type="hidden" name="orderIdx" value="1"/>
									    </div>
									    <div class="layui-inline">
									    	<label class="layui-form-label width90">支付对象单位</label>
								      		<div class="layui-input-inline" style="width: 110px;">
									      		<input type="text" name="accountName" value="" maxlength="100" lay-verify="required" autocomplete="off" class="layui-input">
								      		</div>
									    </div>
									    <div class="layui-inline">
									      	<label class="layui-form-label width60">银行帐号</label>
									      	<div class="layui-input-inline" style="width: 120px;">
									        	<input type="text" name="accountNo" value="" maxlength="50"  lay-verify="required|number" autocomplete="off" class="layui-input">
									      	</div>
									    </div>
									    <div class="layui-inline">
									      	<label class="layui-form-label width50">开户行</label>
									      	<div class="layui-input-inline" style="width: 120px;">
									        	<input type="text" name="openBankName" value="" maxlength="100"  lay-verify="required" autocomplete="off" class="layui-input">
									      	</div>
									    </div>
									    <div class="layui-inline">
									      	<label class="layui-form-label width60">款项名称</label>
									      	<div class="layui-input-inline"  style="width: 120px;">
									        	<input type="text" name="itemName" value="" maxlength="100"  lay-verify="required" autocomplete="off" class="layui-input">
									      	</div>
									    </div>
									    <div class="layui-inline">
									      	<label class="layui-form-label width90">付款金额(元)</label>
									      	<div class="layui-input-inline" style="width:98px;">
									        	<input type="text" name="paySingle" maxlength="13" onblur="isNumberFloat(this);arabiaToCN(this,1);" lay-verify="required|floatAmount" autocomplete="off" class="layui-input">
									      	</div>
									    </div>
									    <div class="layui-inline">
									    	<button type="button" class="layui-btn layui-btn-sm" id="addCommBtn1" onclick="addCommRow(this)"><i class="layui-icon">&#xe654;</i></button>
									    	<button type="button" class="layui-btn layui-btn-sm" style="display:none" id="delCommBtn1" onclick="deleteCommRow(1)"><i class="layui-icon">&#xe640;</i></button>
									    </div>
								    </div>
					    		</div>
						  		<div class="layui-form-item">
								    <div class="layui-inline width106">
									    	<p class="right">合计(元)<label></label>：</p>
									    </div>
									 <div class="layui-inline">
								        	<input type="text"  value="0.00" style="border:0;font-weight:bold;color:red;font-size:18px;text-align:right;width:90px" 
								        		lay-verify="required|number" autocomplete="off"  class="layui-input payTotal" readonly>
									    </div>   
							    </div>
				    		</div>
						</fieldset>
					</div>
				</fieldset>
				
				<fieldset class="layui-elem-field layui-field-title fieldset" >
			  		<legend class="layui-btn layui-legend" style="text-align:left;cursor:default;">附件信息  ></legend>
					  	<div style="margin-top:20px;">
						    <div class="layui-form-item">
							    <label class="layui-form-label" style="width:350px;">支持pdf、excel、word、图片资料，可上传多个</label>
							</div>
						    <div class="layui-form-item">
							    <label class="layui-form-label">资料文件</label>
							    <div class="layui-input-block">
							    	<div class="layui-upload">
						              	<button type="button" class="layui-btn" id="1-upload-more">上传</button>
				                		<div class="layui-upload-list" id="1-upload-more-list">
				                		</div>
						            </div>
							    </div>
						  	</div>
					  	</div>
				</fieldset>
				
				<div class="layui-form-item" style="position: fixed ! important; right: 30px; bottom:45%;z-index:10000;">
					<div class="layui-input-block">
			      		<button class="layui-btn layui-bg-blue layui-btn-normal layui-btn-lg  layui-btn-radius" type="button" lay-submit lay-filter="addInfo_form_submit" id="addInfo_form_submit">
			      		<i class="layui-icon layui-icon-ok layuiadmin-button-btn"></i>
			      		提交
			      		</button>
			      	</div>
			    </div>
			</form>
  		</div>
	</div>
</div>

  <script>
	//静态资源路径前缀
	var staticPath = '${fileHttpPre}';
	
  layui.config({
    base: '${ctx}/resources/layuiadmin/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index', 'set', 'upload', 'element', 'laydate'], function(){
    var $ = layui.$
    ,form = layui.form
    ,element = layui.element
    ,laydate = layui.laydate
    ,upload = layui.upload;
    
 	// 正则校验
	form.verify({
		//验证汉字
	    CHS:[
	    	/^[\u0391-\uFFE5]+$/
	    	,'只能输入汉字'
	  	],
	  	//大于0的正整数
	  	intNumber:[
			/^[1-9]\d*$/
			,'请输入正确的数字'
	  	],
	  	//数字只能有两位小数
	  	floatNumber:[
			/^([-]?)([0-9](\d+)?(\.\d{1,2})?$)|(^\d\.\d{1,2}$)/
			,'请输入正确的数字'
	  	],
	  	//数字大于等于0，并只能有两位小数
	  	floatAmount:[
			/^([0-9](\d+)?(\.\d{1,2})?$)|(^\d\.\d{1,2}$)/
			//var pattern=/^((\d+\.\d*[1-9]\d{1})|(\d*[1-9]\d*\.\d{2}))$/; 
			,'请输入正确的数字'
	  	]
	});
 	
	//日期组件
    laydate.render({
        elem: '#applyPayDate'
      }); 

	  //根据选中的项目全局唯一编号，来取付款公司的名称
	  form.on('select(proCode)', function(data){
	 	  var proCode = data.value;
	 	  if(proCode == null || proCode == ''){
	 		    //清空付款公司的PK信息，名称、及项目名称
	 		 	$('#hrOrgBillName').val('');
				$('#hrOrgBillId').val('');
				$('#proName').val('');
	    		return;
	      }
	 	 
	 	  //为项目名称赋值
	 	 $('#proName').val(data.elem[data.elem.selectedIndex].text);
	 	 $.ajax({
				type : "POST", //提交方式  
				url : "${ctx}/paymentApply/getPaymentCompany",//路径  
				data : {
					"proCode" :proCode
				},//数据，这里使用的是Json格式进行传输  
				success : function(result) {//返回数据根据结果进行相应的处理 
					if(result.orgInfo){
						result = result.orgInfo;
						
						$('#hrOrgBillName').val(result.compName);
						$('#hrOrgBillId').val(result.id);
						
					}else{
						$('#hrOrgBillName').val('');
						$('#hrOrgBillId').val('');
						//layer.msg('付款公司调取数据异常~',{icon: 0});
					}
				} 
			});
	 });
	   	 
	
	//运营付款申请 附件上传
  	upload.render({
	      elem: '#1-upload-more'
	      ,url: basePath + '/paymentApply/uploadAtt/'
	      ,data: {
	    	  types:1
	    		}
	      ,multiple: true
	      ,accept: 'file'
	      ,acceptMime: 'application/zip,application/x-rar-compressed,image/jpeg,image/png,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.ms-powerpoint,application/vnd.openxmlformats-officedocument.presentationml.presentation,application/vnd.ms-excel,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/pdf'
	   	  ,before: function(obj){ //obj参数包含的信息
	   		    layer.load(); //上传loading
	   		  }
	      ,done: function(res){
	    	  //如果上传失败
	          if(res.code > 0){
	        	  layer.closeAll('loading'); //关闭loading
	        	  return layer.msg(res.msg,{icon: 7});
	          }
	          //上传完毕
	   	  	  if(res.entity != null && res.entity.length > 0){
				for(var i in res.entity){
					var paymentApply = res.entity[i];
					var arr = paymentApply.split("|");
					var imgSrc = "";
					var suffix = arr[1].substring(arr[1].lastIndexOf(".")+1,arr[1].length);
					if(suffix == 'jpg' || suffix == 'png'){
						imgSrc = "${fileHttpPre}/"+arr[3];
					}else{
						imgSrc = "${ctx}/resources/images/"+suffix+".jpg";
					}
	        		$('#1-upload-more-list').append('<div class="layui-upload-img-div" id="upload_img_'+arr[2]+'"><img src="'+imgSrc+'" title="'+ arr[1] +'" class="layui-upload-img"><div class="mask"><a href="javascript:void(0)" onclick="showImg(\''+"${fileHttpPre}"+arr[3] +'\');">查看</a><a href="javascript:void(0)" onclick="del(\''+arr[2]+'\')";>删除</a></div><p>'+arr[1]+'</p><input type="hidden" value="'+paymentApply+'" id="fileAtt_'+arr[2]+'" name="fileAtt1" ></input></div> ');
				}
		  	  }
	      }
	      ,allDone: function(obj){ //当文件全部被提交后，才触发
	    	  layer.closeAll('loading'); //关闭loading
	      }
	      ,error: function(){
	    	  layer.closeAll('loading'); //关闭loading
	          //上传失败
	          layer.msg("上传失败，请稍后再试~",{icon: 7});
	        }
	    });
	
  	
   	//监听提交
  	form.on('submit(addInfo_form_submit)', function(data){
  		//禁止多次提交
  		$("#addInfo_form_submit").removeAttr("lay-submit").removeClass("layui-bg-blue").addClass("layui-btn-disabled");
  		layer.load();
       	//提交 Ajax 成功后，静态更新表格中的数据
       	$.ajax({
           	type : 'post',
			url : basePath + '/paymentApply/save',
           	data: $('#addInfo_form').serialize(),
			success:function(result){
				if(result.success){
					layer.closeAll('loading'); //关闭loading
					layer.msg('提交单据成功~',{icon: 1});
					//两秒后关闭当前页面
					setTimeout(function(){
						/**
						 * 查找父菜单，并刷新
						 */
						var topDoc = $(window.top.document);
						var path = basePath + '/paymentApply/list';
						// 获取页面名称
						var name = topDoc.find(".layui-nav-item [lay-href^='" + path + "']").text();
						if(name == '' || name == null){//若list列表页面被人为关闭
							name = '运营付款申请';
						}
						window.parent.layui.index.openTabsPage(path, name);
						var iframe = window.parent.layui.admin.tabsBody(window.parent.layui.admin.tabsPage.index).find(".layadmin-iframe");
						iframe[0].contentWindow.location.reload(true);
						
						/**
						 * 关闭当前页
						 */
						var currPath = basePath + '/paymentApply/add';
						var layid = topDoc.find("li[lay-id^='" + currPath + "']").attr('lay-id');
						window.parent.layui.element.tabDelete('layadmin-layout-tabs', layid);//关闭当前页
				        }, 2000);
				}else{
					layer.closeAll('loading'); //关闭loading
  					$("#addInfo_form_submit").removeClass("layui-btn-disabled").addClass("layui-bg-blue").attr("lay-submit","");
					layer.msg(result.msg,{icon: 7});
			  	}
			}
       	});
   	});  
 	// data-type事件
    $('.layui-btn.layuiadmin-btn-admin').on('click', function(){
      var type = $(this).data('type');
      active[type] ? active[type].call(this) : '';
    });

  });
  

	//新增付款明细子项
	function addCommRow(t){
		var $ = layui.$;
		var delBtnCount = $("button[id^='delCommBtn']").length;
		if(delBtnCount == 1){
			$("button[id^='delCommBtn']").each(function(){
				$(this).removeAttr("style");
			});
		}
		var thisid = $(t).attr("id").substring(10);
		thisid = $("div[id=commRow" + thisid + "]").find(".width106").find("label").html();
		thisid = parseInt(thisid);
		var nextIndex = parseInt(thisid) + 1;
		var maxInd = $("div[id^='commRow']").length;
		$("div[id^='commRow']").each(function(){
			var tId = $(this).attr("id").substring(7);
			tId = parseInt(tId);
		  	if(tId > maxInd){
		  		maxInd = parseInt(tId);
		  	}
		  	var thisIndex = $(this).find(".width106").find("label").html();
		  	thisIndex = parseInt(thisIndex);
		  	var nextId = thisIndex + 1;
		  	if(thisIndex > thisid) {
		  		$("div[id=commRow" + tId + "]").find(".width106").find("label").html(nextId);
		  		$("div[id=commRow" + tId + "]").find(".width106").find("input").val(nextId);
		  	}
		});
		var ind = maxInd + 1;
		var medalHtml = '';
		medalHtml += '<div id="commRow'+ind+'">';
		medalHtml += '	<div class="layui-form-item">';
		medalHtml += '	<div class="layui-inline width106">';
		medalHtml += '		<p class="right">子项<label>'+nextIndex+'</label>：</p>';
		medalHtml += '		<input type="hidden" name="orderIdx" value="'+nextIndex+'"/>';
		medalHtml += '	</div>';
		medalHtml += '	<div class="layui-inline">';
		medalHtml += '		<label class="layui-form-label width90">支付对象单位</label>';
		medalHtml += '		<div class="layui-input-inline" style="width: 110px;">';
		medalHtml += '			<input type="text" name="accountName" value="" maxlength="100" lay-verify="required" autocomplete="off" class="layui-input">';
		medalHtml += '		</div>';
		medalHtml += '	</div>';
		medalHtml += '	<div class="layui-inline">';
		medalHtml += '		<label class="layui-form-label width60">银行帐号</label>';
		medalHtml += '		<div class="layui-input-inline" style="width:120px;">';
		medalHtml += '			<input type="text" name="accountNo" value="" maxlength="50"  lay-verify="required|number" autocomplete="off" class="layui-input">';
		medalHtml += '		</div>';
		medalHtml += '	</div>';
		medalHtml += '	<div class="layui-inline">';
		medalHtml += '		<label class="layui-form-label width50">开户行</label>';
		medalHtml += '		<div class="layui-input-inline" style="width:120px;">';
		medalHtml += '			<input type="text" name="openBankName" value="" maxlength="100"  lay-verify="required" autocomplete="off" class="layui-input">';
		medalHtml += '		</div>';
		medalHtml += '	</div>';
		medalHtml += '	<div class="layui-inline">';
		medalHtml += '		<label class="layui-form-label width60">款项名称</label>';
		medalHtml += '		<div class="layui-input-inline" style="width:120px;">';
		medalHtml += '			<input type="text" name="itemName" value="" maxlength="100"  lay-verify="required" autocomplete="off" class="layui-input">';
		medalHtml += '		</div>';
		medalHtml += '	</div>';
		
		medalHtml += '	<div class="layui-inline">';
		medalHtml += '		<label class="layui-form-label width90">付款金额(元)</label>';
		medalHtml += '		<div class="layui-input-inline" style="width:98px;">';
		medalHtml += '			<input type="text" name="paySingle" maxlength="13" onblur="isNumberFloat(this);arabiaToCN(this,1);" lay-verify="required|floatAmount" autocomplete="off" class="layui-input">';
		medalHtml += '		</div>';
		medalHtml += '	</div>';
		
		medalHtml += '	<div class="layui-inline">';
		medalHtml += '		<button type="button" class="layui-btn layui-btn-sm" id="addCommBtn'+ind+'" onclick="addCommRow(this);"><i class="layui-icon">&#xe654;</i></button>';
		medalHtml += '		<button type="button" class="layui-btn layui-btn-sm" id="delCommBtn'+ind+'" onclick="deleteCommRow('+ind+');"><i class="layui-icon">&#xe640;</i></button>';
		medalHtml += '	</div>';
		medalHtml += '	</div>';
		medalHtml += '</div>';
		$(t).parent().parent().parent().after(medalHtml);
		layui.form.render();
	}
	
	//删除一行
	function deleteCommRow(id){
		var $ = layui.$;
		layui.layer.confirm('确定删除？',{icon:3, title :'提示'}, function(index){
 		    var rowLength = $("div[id^='commRow']").length;
 		   	var thisid = $("div[id=commRow" + id + "]").find(".width106").find("label").html();
	    	thisid = parseInt(thisid);
	    	$("div[id^='commRow']").each(function(){
				var tId = $(this).attr("id").substring(7);
				tId = parseInt(tId);
			  	var thisIndex = $("div[id=commRow" + tId + "]").find(".width106").find("label").html();
			  	thisIndex = parseInt(thisIndex);
			  	var nextId = thisIndex - 1;
			  	if(thisIndex > thisid) {
			  		$("div[id=commRow" + tId + "]").find(".width106").find("label").html(nextId);
			  		$("div[id=commRow" + tId + "]").find(".width106").find("input").val(nextId);
			  	}
			});
	    	$("#commRow"+id).remove();
	    	//剩下最后一行，删除按钮隐藏，input验证关闭
	    	var delBtnCount = $("button[id^='delCommBtn']").length;
			if(delBtnCount == 1){
				$("button[id^='delCommBtn']").each(function(){
					$(this).attr("style","display:none");
				});
			}
			//删除后重新计算申请费用 总额
	  		var payTotal = 0;
	  		$("input[name=paySingle]").each(function(){
				var tId = $(this).val();
				if(tId !=''){
					payTotal += parseFloat(tId);
				}
			});
	  		//合计付款金额总计：
	  		payTotal = parseFloat(payTotal).toFixed(2);//最后四舍五入
	  		$('input.payTotal').val(payTotal);
			
			layui.layer.close(index);
 		});
	}
  
	//删除文件
	function del(index){
		layui.$("#fileAtt_"+index).remove();
		layui.$("#upload_img_"+index).remove();
	}
  

	//根据url查看文件
	function showImg(url){
		var openWin = window.open(url,'','left=410,height=768, width=1024, top=200,  toolbar=no, menubar=no, scrollbars=no, resizable=no,location=no, status=no');
	}
	
  	//计算子项最大值
	function isNumberFloat(obj){
  		var $ = layui.$;
		if (obj.value == '' || obj.value == null) {
			return;
		}
  		var rgx = /^([-]?)([0-9](\d+)?(\.\d{1,2})?$)|(^\d\.\d{1,2}$)/;

		var boolrgx = rgx.test(obj.value);// true 
		if (!boolrgx) {
			obj.value =0;
			layer.msg('请输入正确数字，且保留两位小数！');
		}
		checkMaxValue();
	}
  	//计算子项最大值
	function checkMaxValue(){
  		var $ = layui.$;
  		var payTotal = 0;
  		$("input[name=paySingle]").each(function(){
			var tId = $(this).val();
			if(tId != ''){
				payTotal += parseFloat(tId);
			}
		});
  		//合计付款金额总计：
  		payTotal = parseFloat(payTotal).toFixed(2);//最后四舍五入
  		$('input.payTotal').val(payTotal)
	}
  	
  </script>
</body>
</html>

